<html lang="zh">

<head>
    <title>自定义异常开关控制</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <style>
        body {
            display: flex;
            font-size: 12px;
            flex-flow: column;
        }

        body > button {
            margin: 0;
        }

        body > div {
            display: flex;
            height: calc(100% - 25px);
        }

        body > div > div {
            flex: 1;
            overflow: auto;
        }

        body > div label {
            cursor: pointer;
        }

        body > div > div > * > li {
            display: flex;
            justify-content: space-between;
        }

        body > div > div > * > li button {
            margin: 0;
            padding: 0 3px;
            font-size: 8px;
        }

    </style>
    <script>
        function writeConfig() {
            let postBody = {};
            $('body>div input:checkbox').toArray().forEach(t => {
                postBody[t.name] = t.checked;
            })
            $.post({
                url: '/api/write',
                contentType: 'application/json',
                data: JSON.stringify(postBody),
                success: function () {
                    location.reload();
                },
            }).fail(function () {
                alert('保存配置失败')
            });
        }

        function readConfig() {
            $.get('/api/read',
                function (data) {
                    Object.keys(data).forEach(t => {
                        let ol_item = $(`<li><label>${t}<input name="${t}" type="checkbox"/></label><button>－</button></li>`);
                        if (data[t] === true) {
                            ol_item.find('input').attr("checked", "checked");
                        }
                        ol_item.find('button').click(function () {
                            ol_item.remove()
                        });
                        $('body>div>div>ol').append(ol_item);
                    })
                    getKeys();
                }).fail(function () {
                alert('配置获取失败')
            });
        }

        function getKeys() {
            $.get('/api/keys',
                function (data) {
                    data.sort().forEach(t => {
                        let exist = new Set($('body>div>div>ol>li>label').toArray().map(t => t.innerText))
                        if (exist.has(t)) {
                            return;
                        }
                        let ul_item = $(`<li><label>${t}</label><button>＋</button></li>`);
                        ul_item.find('button').click(function () {
                            let ol_item = $(`<li><label>${t}<input name="${t}" type="checkbox"/></label></li>`);
                            $('body>div>div>ol').append(ol_item);
                            ul_item.remove();
                        })
                        $('body>div>div>ul').append(ul_item);
                    })
                }).fail(function () {
                alert('配置获取失败')
            });
        }

        $(function () {
            readConfig();
        })
    </script>
</head>

<body>
<button onclick="writeConfig()">保存配置</button>
<div>
    <div>
        <ul></ul>
    </div>
    <div>
        <ol></ol>
    </div>
</div>
</body>

</html>